<template>
    <el-form-item label="视频" prop="video">
        <el-upload
            action=""
            list-type="picture-card"
            accept=".mp4,.MP4"
            :limit="1"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :before-upload="beforeUpdata"
            :on-change="handleChange"
            :file-list="uploadFileList"
            :on-remove="Remove"
            :class="{ hide: uploadFileList.length }">
            <template v-if="uploadFileList.length === 0" #default>
                <el-icon class="upload_icon"><plus /></el-icon>
            </template>
            <template #file="{ file }">
                <video v-if="uploadFileList.length !== 0" :src="uploadFileList[0].url"></video>
                <span class="el-upload-list__item-actions">
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <el-icon><delete /></el-icon>
                    </span>
                </span>
            </template>
            <template #tip>
                <div class="el-upload__tip">
                    <span>格式支持mp4，文件大小不超过10M,时长不超过30s</span>
                </div>
            </template>
        </el-upload>
    </el-form-item>
</template>
<script setup lang="ts">
import { ref, reactive, watch, toRefs } from 'vue';
import { ElForm, ElMessage } from 'element-plus';
import { Plus, Delete } from '@element-plus/icons-vue';
import type { UploadFile } from 'element-plus/es/components/upload/src/upload';
import { uploadFile2 } from '@/api/common';
import { getSetionId, playTime, IsNotEmpty } from '@/utils/utils';
import { endLoading, startLoading } from '@/utils/request';
const emit = defineEmits(['submit']);
const formRef = ref<InstanceType<typeof ElForm>>();
const disabled = ref(false);
interface Video {
    url: string;
    code: string;
    name: string;
}
const uploadFileList = ref<Array<Video>>([]);
/**
 * type: 1 图片
 * type: 2 文件
 * type: 3 视频
 * type: 4 语音
 * type: 5 Excell
 *
 *  */
const beforeUpdata = async (file: any) => {
    const is2M = file.size / 1024 / 1024 <= 10;
    const ext = file.name.substring(file.name.lastIndexOf('.'));
    if ('.mp4,.MP4'.indexOf(ext) == -1) {
        ElMessage.warning(`只能上传Mp4格式`);
        return false;
    }
    const res: any = await playTime(file);
    if (res > 30) {
        ElMessage.warning(`上传的视频不能超过30s`);
        return false;
    }
    if (!is2M) {
        ElMessage.warning(`上传的视频最大支持10M`);
        return false;
    }
    return true;
};
const handleRemove = (file: UploadFile) => {
    uploadFileList.value = uploadFileList.value.filter((item: any) => item.url != file.url);
    emit('submit', uploadFileList.value);
};

// 上传文件
const uploadImg = async (file: any) => {
    file = file.raw;
    const flag = await beforeUpdata(file);
    if (!flag) return false;
    startLoading();
    return await uploadFile2(
        {
            file,
            fileName: file.name
        },
        null,
        true
    );
};
// 长传改变
const handleChange = async (file: UploadFile, list: UploadFile[]) => {
    const existFile = list.slice(0, list.length - 1).find(f => f.name === file.name);
    if (existFile) {
        ElMessage.error('当前视频已经存在!');
        list.pop();
        return;
    }
    try {
        const res: any = await uploadImg(file);
        if (!IsNotEmpty(res)) {
            list.pop();
            return;
        }
        uploadFileList.value.push(res);
        emit('submit', uploadFileList.value);
        endLoading();
    } catch (error) {
        endLoading();
    }
};
const handleExceed = (file: UploadFile, list: UploadFile[]) => {
    ElMessage.warning(`当前限制选择1 个视频，本次选择了1个视频，共选择了 ${file.length + list.length} 个视频`);
};
defineExpose({ uploadFileList });
</script>
<style lang="scss" scoped>
.pre_img_box {
    overflow: hidden;

    .pre_image {
        display: block;
        margin: auto;
        max-height: 400px;
    }
}
</style>
<style>
.upload_icon {
    width: 140px;
    height: 140px;
}

.hide .el-upload--picture-card {
    display: none;
}
</style>
